<template>
  <div class='word-cloud'>
    <div ref="wordCloudRef"></div>
  </div>
</template>
<script lang='tsx' setup>
import { ref, reactive, unref, watch, onMounted } from "vue"
import { useRouter, useRoute } from "vue-router"
const route = useRoute()
const router = useRouter()
import * as E from 'echarts'
import 'echarts-wordcloud'
const wordCloudRef = ref()
//拿出数据渲染词云
const datalist=localStorage.getItem('json')
const arrlist=JSON.parse(datalist)
console.log(arrlist);

const informationList = [
  {
    "entityKey": "人名",
    "values": ["奥列涅夫卡", "哈特廖夫", "叶夫帕托里亚", "尼古拉耶夫", "侯兵", "苏哈尔", "纳希莫夫", "拉兹沃扎耶夫", "日乌军", "克里米"
    ]
  },
  {
    "entityKey": "机构名",
    "values": ["美陆军", "美国国防部", "美军", "国防部卫星通信网", "国防部卫星通信", "美太空军", "美国陆军", "黑海舰队司令部", "塞瓦斯托波尔海军工程学校", "黑海舰队预备指挥所"]
  },
  {
    "entityKey": "地点",
    "values": ["美国", "俄罗斯塞瓦斯托波尔", "莫斯科", "海岸线", "苏联", "塞瓦斯托波尔", "罗马尼亚", "克里姆林宫", "保加利亚", "尼古拉耶夫州"]
  },
  {
    "entityKey": "国家",
    "values": ["海地", "中国"]
  }
]
/**
 * @description: 生成随机数
 * @param {*} digit 数字位数
 * @param {*} symbol 双数的正负
 * @param {*} length 长度
 * @return {*} 长度1返回数字，否则返回数组（0无效入参，返回undefined）
 * @author: 叶世超
 */
const randomDigit = (digit: number, symbol: string, length: number) => {
  var numArray: Array<Number> = []
  for (var i = 0; i < length; i++) {
    var num: String = ''
    for (var j = 0; j < digit; j++) { num += String(Math.floor(Math.random() * 10)) }
    // 双数转换运算符号
    if (Number(num) % 2 == 0) num = symbol + num
    numArray.push(Number(num))
  }
  if (length === 1) return Number(numArray[0])
  if (length > 1) return numArray
}
// 生成词云库权重
const weightFcn = () => {
  var weightArray = randomDigit(3, '+', 10)
  console.log(weightArray)
  for (let i = weightArray.length - 1; i > 0; i--) {
    const j = Math.round(Math.random() * (weightArray.length - 1 - i)) + i; // 生成[0, i]之间的随机索引
    [weightArray[i], weightArray[j]] = [weightArray[j], weightArray[i]] // 交换当前元素与随机选取的元素位置
  }
  informationList.forEach(element => {
    element.dataArray = []
    if (element.values.length !== 0) {
      element.values.forEach((item, index) => {
        element.dataArray.push({ name: item, value: weightArray[index]})
      })
    }
  })
}
weightFcn()
const initEchart = () => {
  const myChart = E.init(unref(wordCloudRef))
  const option = {
    series: [{
      type: 'wordCloud',
      shape: 'circle',
      keepAspect: false,
      // maskImage: maskImage,
      left: 'center',
      top: 'center',
      width: '100%',
      height: '90%',
      right: null,
      bottom: null,
      sizeRange: [12, 60],
      gridSize: 10, // 设置词云图的内边距
      // rotationRange: [-90, 90],
      rotationRange: [0, 0], // 将旋转范围设为0，即不旋转
      rotationStep: 45,
      drawOutOfBound: false,
      layoutAnimation: true,
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        // 生成不超过160的rgb值
        color: function () {
          return 'rgb(' + [
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160)
          ].join(',') + ')';
        }
      },
      emphasis: {
        // focus: 'self',
        textStyle: {
          textShadowBlur: 3,
          textShadowColor: '#333'
        }
      },
      //data属性中的value值却大，权重就却大，展示字体就却大
      data: informationList[0].dataArray,
    }]

  }
  option && myChart.setOption(option)

  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
onMounted(() => {
  initEchart()
})
</script>
<style lang='scss' scoped>
.word-cloud {
  height: 100%;
  width: 100%;
  // border: 1px solid red;
  box-sizing: border-box;
  div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
</style>
